<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no,email=no" />
		<title>首页</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
	</head>
	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper transparent" style="margin-top: -1px;">
			<div class="mui-scroll">
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop" id="sliderImg">
					</div>
					<div class="mui-slider-indicator" style="padding-bottom: 8px;">
					</div>
					<div class="mui-pull-loading mui-spinner custom-loading"></div>
				</div>
				<ul class="fast-nav">
					<li id="stores"><div class="shortcut-nav"><i class="iconfont icon-chao"></i></div><span>儒牛超市</span></li>
					<li id="categoryPage"><div class="shortcut-nav"><i class="iconfont icon-leimupinleifenleileibie"></i></div><span>商品分类</span></li>
					<li id="topicList"><div class="shortcut-nav"><i class="iconfont icon-icon"></i></div><span>热门专题</span></li>
					<!--<li id="howShop"><div class="shortcut-nav"><i class="iconfont icon-weimendian"></i></div><span>精选微店</span></li>-->

					
					<li id="goCart" ><div class="shortcut-nav"><i class="iconfont icon-youhuiquan"></i></div><span>儒牛充值</span></li>
					<!--<li id="jdRecharge"><div class="shortcut-nav"><i class="iconfont icon-jindou2x10"></i></div><span>金豆充值</span></li>-->
					<!--<li id="showFavProduct"><div class="shortcut-nav"><i class="iconfont icon-xin"></i></div><span>收藏宝贝</span></li>-->
					<!--<li id="proHistory"><div class="shortcut-nav"><i class="iconfont icon-wodezuji"></i></div><span>我的足迹</span></li>-->
				</ul>
				
				
				<div id="indexTopic" class="index-topic mui-clearfix">
					<div class="mui-pull-loading mui-spinner custom-loading"></div>
				</div>
				<h3 class="custom-title-index"></h3>
				<ul class="mui-table-view mui-grid-view mui-clearfix index-product" id="productsList">
				</ul>
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/delayimg.min.js"></script>
		<script>
			var page = 1,
				isnodata = false,
				imgWidth,
				pImgLen=0,
				oldImgLen,
				loadPage;
			mui.init({
				pullRefresh : {
				    container:'#pullrefresh',
				    deceleration:0.0006,
				    up : {
					    contentrefresh : "正在加载...",
					    contentnomore:'已加载全部商品',
					    callback :function(){
					      	var self=this;
					      	setTimeout(function() {
						      	if (!isnodata) {
						      		page++;
						      		
							        mui.ajax(URL+'api/home/Get?pageNo='+page+'&pageSize=10',{
										dataType:'json',
										type:'get',
										timeout:10000,
										success:function(data){
										
											if(data.Success=='true'){
							                    var html = '';
							                    oldImgLen=pImgLen;
							                    pImgLen+=data.Product.length;
							                    for (var i = 0; i < data.Product.length ; i++) {
							                    	
							                        html += '<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
						                        			'<div class="index-product-box">';
						                        				if(data.Product[i].Discount>0 && data.Product[i].Discount*10 != 10){
					                        						html += '<i>'+(data.Product[i].Discount*10)+'折</i>';
					                        					}
																html += '<a data-id="'+data.Product[i].Id+'">'+
																	'<div class="p-img" style="height:165px"><b data-delay-background="'+data.Product[i].ImageUrl+'"></b></div>'+
																	'<div class="mui-media-body">'+data.Product[i].Name+'</div>'+
																	'<p class="index-product-price"><span>¥ '+data.Product[i].SalePrice+'</span>'+(data.Product[i].Discount*10 != 10 ? '<em>¥'+data.Product[i].MarketPrice+'</em>' : '')+'</p>'+
																'</a>'+
															'</div>'+
									            		'</li>';
							                    }
							                    document.getElementById('productsList').insertAdjacentHTML('beforeend',html);
							                    for(var i=oldImgLen; i<pImgLen; i++){
							                    	document.getElementsByClassName('p-img')[i].style.height= imgWidth+'px';
							                    }
							                    delayimg.render();
							                    if (data.TotalProduct<=page*10) {isnodata = true;}
												self.endPullupToRefresh(isnodata);
											}
										},
										error:function(xhr,type,errorThrown){
												
											plus.nativeUI.toast('请求失败，请检查网络')
										}
									});
							    }else{
							    	self.endPullupToRefresh(isnodata);
							    }
						    },1500);
				    	}
					    
				    },
				    down : {
						contentdown : "下拉可以刷新",
						contentover : "释放立即刷新",
						contentrefresh : "正在刷新...",
						callback :function(){
							setTimeout(function(){
								page = 1;
								isnodata = false;
								pImgLen=0;
								loadPage();
								mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
								mui('#pullrefresh').pullRefresh().refresh(true);
							},300)
						}
				    }
				}
			});
			var slider=document.getElementById('sliderImg'),
				topicbox=document.getElementById('indexTopic'),
				loadArr=document.getElementsByClassName('custom-loading');
			slider.style.height=slider.offsetWidth/2+'px';
//			topicbox.style.height=topicbox.offsetWidth*0.62+'px';
			setTimeout(function(){
				for(var i=loadArr.length-1; i>=0; i--){
					loadArr[i].parentNode.removeChild(loadArr[i]);
				}
			},5000);
			
			if (mui.os.android)
				document.getElementsByClassName('mui-scroll')[0].className='';
			
			mui.plusReady(function() {
				loadPage=function(){
					mui.ajax(URL+'api/home/Get?pageNo=1&pageSize=10',{
						dataType:'json',
						type:'get',
						success:function(data){
						
							if(data.Success=='true'){
							
								var imgLen=data.Slide.length;
								if(imgLen>0){
									//轮播图
									var outputimg = ""; 
						            var outputright = "";
						            
						            outputimg+='<div class="mui-slider-item mui-slider-item-duplicate"><a class="c-href" data-href="'+data.Slide[imgLen-1].Url+'"><img src="'+data.Slide[imgLen-1].ImageUrl+'" /></a></div>';
						            for (var i = 0; i < imgLen; i++) {
						            	outputimg+='<div class="mui-slider-item"><a class="c-href" data-href="'+data.Slide[i].Url+'"><img src="'+data.Slide[i].ImageUrl+'" /></a></div>';
						                var right = '<div class="mui-indicator';
						                if (i == 0) {
						                    right = right + ' mui-active';
						                }
						                right = right + '"></div>';
						                outputright += right;
						            }
						            outputimg+='<div class="mui-slider-item mui-slider-item-duplicate"><a class="c-href" data-href="'+data.Slide[0].Url+'"><img src="'+data.Slide[0].ImageUrl+'"  /></a></div>';
						            slider.innerHTML=outputimg;
						            document.getElementsByClassName('mui-slider-indicator')[0].innerHTML=outputright;
						            
									mui('#slider').slider({interval:5000});
						            
								}else{
									document.getElementById('slider').style.display='none';
								}
								
								//推荐专题
								var $indexTopic= document.getElementById('indexTopic')
								var indexTopic='';
								$indexTopic.innerHTML =""
								console.log(data.Topic)
								for (var i = 0; i < data.Topic.length; i++) {
									
							
									if(i == 0){
									indexTopic+='<div class="forebox1 mui-clearfix">'
									}
									if(i == 2){
									indexTopic +='<div class="forebox2 mui-clearfix">'	
									}
									indexTopic+='<a class="fore'+(i+1)+' c-href" data-href="'+data.Topic[i].Url+'"><img src="'+data.Topic[i].ImageUrl+'"/></a>';
									if(i == 1){
									indexTopic +='</div>'	
									}
									if(i == 4){
									indexTopic +='</div>'	
									}
								}  
								$indexTopic.insertAdjacentHTML('beforeend',indexTopic);
								//第一页商品
								if (data.TotalProduct<=10) {isnodata = true;}
								if (data.Product.length > 0) {
				                    var html = '';
				                    for (var i = 0; i < data.Product.length; i++) {
				                    	
				                        html += '<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
		                        			'<div class="index-product-box">';
		                        				if(data.Product[i].Discount>0 && data.Product[i].Discount*10 != 10){
			                        						html += '<i>'+(data.Product[i].Discount*10)+'折</i>';
			                        					}
												html +='<a data-id="'+data.Product[i].Id+'">'+
													'<div class="p-img" style="height:165px"><b data-delay-background="'+data.Product[i].ImageUrl+'"></b></div>'+
													'<div class="mui-media-body">'+data.Product[i].Name+'</div>'+
													'<p class="index-product-price"><span>¥ '+data.Product[i].SalePrice+'</span>'+(data.Product[i].Discount*10 != 10 ? '<em>¥'+data.Product[i].MarketPrice+'</em>' : '')+'</p>'+
												'</a>'+
											'</div>'+
					            		'</li>';
				                    }
				                    document.getElementById('productsList').innerHTML=html;
				                    imgWidth = document.getElementsByClassName('p-img')[0].offsetWidth;
				                    pImgLen+=data.Product.length;
				                    for(var i=0; i<pImgLen; i++){
				                    	document.getElementsByClassName('p-img')[i].style.height= imgWidth+'px';
				                    }
				                    //图片延迟加载初始化
				                    delayimg.init();
				                }
								window.scrollTo(0,0)
								plus.navigator.closeSplashscreen();
								document.getElementById('pullrefresh').className='mui-content mui-scroll-wrapper';
							}
						},
						error:function(xhr,type,errorThrown){
							
							plus.navigator.closeSplashscreen();
							var errorText='<div class="empty-show"><h4>网络不给力，请检查网络！</h4><button id="reloadWv" class="mui-btn mui-btn-negative">重新加载</button></div>'
							document.getElementById('pullrefresh').innerHTML=errorText;
							document.getElementById('pullrefresh').className='mui-content mui-scroll-wrapper';
						}
					});
				}
				
				loadPage();
				
				//添加列表项的点击事件
				mui('#productsList').on('tap', 'a', function(e) {
					var id = this.getAttribute('data-id');
					showProduct(id);
				});
				
			});
			
			document.getElementById('topicList').addEventListener('tap',function(){
				mui.openWindow({
					id:'topic.html',
					url:'topic.html',
					show: {
						autoShow:true,
						aniShow: 'pop-in'
					},
					waiting: {
						autoShow: false
					}
				});
			});
			
//			document.getElementById('howShop').addEventListener('tap',function(){
//				mui.openWindow({
//					id:'vshop/vshop-list.html',
//					url:'vshop/vshop-list.html',
//					show: {
//						autoShow:true,
//						aniShow: 'pop-in'
//					},
//					waiting: {
//						autoShow: false
//					}
//				});
//			});
			
			
		
			
			
//			document.getElementById('proHistory').addEventListener('tap',function(){
//				if(app.isLogin()){
//					mui.openWindow({
//						id:'history.html',
//						url:'history.html',
//						styles:{bounce:'all'},
//						show: {
//							autoShow:true,
//							aniShow: 'pop-in'
//						},
//						waiting: {
//							autoShow: false
//						}
//					});
//				}else{
//					showLogin();
//				}
//			});
			
			document.getElementById('categoryPage').addEventListener('tap',function(){
				mui.openWindow({
					id:'category.html',
					url:'category.html',
					show: {
						autoShow:true,
						aniShow: 'pop-in'
					},
					waiting: {
						autoShow: false
					}
				});	
			});

					//jd 充值
//				document.getElementById('jdRecharge').addEventListener('tap',function(){
//							mui.openWindow({
//							id:'user/jd-Recharge.html',
//							url:'user/jd-Recharge.html',
//							show: {
//								autoShow:true,
//								aniShow: 'pop-in'
//							},
//							waiting: {
//								autoShow: false
//							}
//						});
//					});
					
				document.getElementById('goCart').addEventListener('tap',function(){
					if(mui.os.ios){
						plus.runtime.openURL('http://new.rubulls.com/m-Wap/RubullCard/Index')
					}else{
						if(app.isLogin()){
							mui.openWindow({
								id:'user-recharge.html',
								url:'user/user-recharge.html',
								show: {
									autoShow:true,
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								}
							});
						}else{
							showLogin();
						}
					}

						
					});
					document.getElementById('stores').addEventListener('tap',function() {
							var vshopid = 1;
							showVshop(vshopid,'/');
						})
				
//				document.getElementById('showFavProduct').addEventListener('tap',function(){
//						if(app.isLogin()){
//							mui.openWindow({
//								id:'user-favproduct.html',
//								url:'user/user-favproduct.html',
//								show: {
//									autoShow:true,
//									aniShow: 'pop-in'
//								},
//								waiting: {
//									autoShow: false
//								}
//							});
//						}else{
//							showLogin();
//						}
//					});
		</script>
	</body>

</html>